<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Title</title>
	<script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
	<script src="/js/agora-rtm-sdk-1.4.3.js"></script>
	<script src="//at.alicdn.com/t/font_2896317_c93fdbvffkf.js"></script>
	<script src="/js/public.js"></script>
	<script src="/js/wow.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/public.css">
	<script src="/js/dream-msg.min.js" type="text/javascript" charset="UTF-8"></script>
</head>

<body class="body">
	<header id="header"></header>

	<div class="header-second">
		<ul class="second-list">
			<li class="list-item active wow fadeInDown" data-index='0' d data-wow-delay="0" data-wow-duration="1s">短信
			</li>

			<li class="list-item  wow fadeInDown" data-index='1' data-wow-delay=".2s" data-wow-duration="1s">我的课程</li>
			<li class="list-item  wow fadeInDown" data-index='2' data-wow-delay=".4s" data-wow-duration="1s">课程记录</li>
			<li class="list-item  wow fadeInDown" data-index='3' data-wow-delay=".6s" data-wow-duration="1s">设置</li>
		</ul>
	</div>

	<div class="loading-wrap">
		<div class="loading">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
	<input style="display: none;" type="file" name="" class="input" accept="image/*" id="">

	

	<div id="mask" class="mask" style="display: none"></div>

	<canvas id="myCanVas" width="600" height="425" style="display: none;"></canvas>

	
</body>
<script type="module">
	import { createMessageWrap } from './components/message/message.js'
	import { createClassWrap } from './components/class/class.js'
	import { createHistory } from './components/classHistory/history.js'
	import createUserSetting from './components/set/setting.js'
	import { getWeekDate, getTime } from '/js/util.js'
	let data = [], isclick = false

	window.onload = async () => {
		productheader('header', 4, 2, 1);

		let tem = `<a href=" /views/teacher/teachers.html"><span data-i18n-text="AnnualAvg">寻找老师</span></a>`;


		$(".title-bar").empty().append(tem);
		await createMessageWrap();
		$('.loading-wrap').hide();
	}
	let initWrap = {
		init(type) {
			switch (type) {
				case 0: {
					if ($('.header-third')[0]) {
						$('.header-third')[0].remove()
					}
				}; break;
				case 1: {
					if ($('.class-wrap')[0]) {
						$('.class-wrap')[0].remove()
					}
				}; break;
				case 2: {
					if ($('.class-wrap')[0]) {
						$('.class-wrap')[0].remove()
					}
				}; break;
				case 3: {
					if ($('.component-wrap')[0]) {
						$('.component-wrap')[0].remove()
					}
				};
				case 4: {
					if ($('.invite-wrap')[0]) {
						$('.invite-wrap')[0].remove()
					}
				}
			}
		},
		0: async function () {
			this.init(0)
			this.init(1)
			this.init(2)
			this.init(3)
			this.init(4)
			let res = await createMessageWrap()
			return res
		},
		1: async function () {
			this.init(0)
			this.init(1)
			this.init(2)
			this.init(3)
			this.init(4)
			let res = await createClassWrap()
			return res
		},
		2: async function () {
			this.init(0)
			this.init(1)
			this.init(2)
			this.init(3)
			this.init(4)
			let res = await createHistory()
			return res
		},
		3: async function () {
			this.init(0)
			this.init(1)
			this.init(2)
			this.init(3)
			this.init(4)
			let res = createUserSetting()
			return res
		},
	}

	$('.second-list')[0].addEventListener('click', async (e) => {
		if (e.target.nodeName.toLowerCase() === 'li') {
			if (isclick) return
			isclick = true
			$('.loading-wrap').show()
			Array.from($('.second-list')[0].children).forEach(item => {
				if (e.target.dataset.index === item.dataset.index) {
					item.className = `list-item active`
				} else {
					item.className = `list-item`
				}
			})
			await initWrap[e.target.dataset.index]()
			$('.loading-wrap').hide()
			isclick = false
		}
	})

	new WOW().init();


</script>

<style type="text/css">
	@import url('./components/message/message.css');
	@import url('./components/class/class.css');
	@import url('./components/set/setting.css');
	@import url('./components/classHistory/history.css');


	html {
		overflow: -moz-hidden-unscrollable;
		height: 100%;
	}

	body {
		-ms-overflow-style: none;
		height: 100%;
		width: calc(100vw + 18px);
		overflow: auto;
	}

	:root {
		--border-color: #F4F5F5;
		--active-white: #FFFFFF;
		--active-green: #5CBFC7;
		--active-gray: #F9F9F9;
	}

	.icon {
		width: 1em;
		height: 1em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}

	.loading-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		user-select: none;
		height: 100%;
	}

	.loading {
		width: 80px;
		height: 40px;
		margin: 0 auto;
		margin-top: 100px;
	}

	.loading span {
		display: inline-block;
		width: 8px;
		height: 100%;
		border-radius: 4px;
		background: lightgreen;
		-webkit-animation: load 1s ease infinite;
	}

	@-webkit-keyframes load {

		0%,
		100% {
			height: 40px;
			background: lightgreen;
		}

		50% {
			height: 70px;
			margin: -15px 0;
			background: lightblue;
		}
	}

	.loading span:nth-child(2) {
		-webkit-animation-delay: 0.2s;
	}

	.loading span:nth-child(3) {
		-webkit-animation-delay: 0.4s;
	}

	.loading span:nth-child(4) {
		-webkit-animation-delay: 0.6s;
	}

	.loading span:nth-child(5) {
		-webkit-animation-delay: 0.8s;
	}


	.select {
		display: none;
		width: 79%;
		height: 140px;
		background-color: #ffffff;
		position: absolute;
		bottom: -140px;
		border-radius: 0px 0px 6px 6px;
		box-shadow: 0px 0px #e1e1e1 1px 0px;
		padding: 0 16px;
	}

	h3 {
		margin-top: 6px;
		font-size: 10px;
		color: #BDC3C9;
		margin-bottom: 6px;
	}


	.option:after {
		content: "";
		width: 14px;
		height: 8px;
		background: url(./static/arrow-down.png) no-repeat center;
		/*通过定位将图标放在合适的位置*/
		position: absolute;
		right: 20px;
		top: 41%;
		/*给自定义的图标实现点击下来功能*/
		pointer-events: none;
	}

	.body {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		/* overflow-x: hidden; */
		/* overflow: hidden; */
	}

	.con {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(237, 239, 240, 1);
	}

	.header-top {
		width: 100vw;
		height: 60px;
		/* padding: 0 1%; */
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}

	.iconsize {
		font-size: 40px;
		color: #DDDddd;
	}

	.content {
		display: flex;
		align-items: center;
		height: 80%;
	}

	.icon {
		width: 120px;
		height: 100%;
		margin-left: 5%;
	}

	.title-bar {
		height: 80%;
		margin-left: 15px;
		display: flex;
		align-items: center;
	}

	.title-right-bar {
		height: 80%;
		border-left: 1px solid #d5d5d5;
		border-right: 1px solid #d5d5d5;
		margin-left: 15px;
		display: flex;
		align-items: center;
		font-size: 10px;
		color: #3C3C3C;
		position: relative;
	}

	.title-right-bar span {
		padding-left: 16px;
		color: #000000;
	}

	.title-bar span {
		padding: 0 20px;
		font-size: 14px;
		white-space: nowrap;
		color: #000000;
	}

	.span-first {
		height: 80%;
		padding: 0 24px;
		border-left: 1px solid #d5d5d5;
		border-right: 1px solid #d5d5d5;
	}

	.main-container {
		width: 40%;
		border-radius: 6rpx;
		border: 1px solid #dddddd;
		margin: 2% 0 3% 0;
		box-shadow: darkgrey 0px 0px 5px 0px
	}

	.header {
		width: 100%;
		background-color: #fff;
		padding: 5px 0 10px 0;
		border-bottom: 1px solid rgba(229, 229, 229, 1);
		text-align: center;
		position: relative;
		border-radius: 6rpx;
	}
</style>

</html>